<template>
    <view class="page project_box">
        <view class="project pd-20" @click="goProjectDetail(item.id)" v-for="item in datas" :key="item.id">
            <view class="flex">
                <view class="isSaleOut" v-if="item.is_sellout == 1">
                    <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/slodOut.png">
                    </image>
                </view>
                <view class="left">
                    <image style="border-radius: 40rpx;" class="img wh-100" :src="item.cover" mode="aspectFill"></image>
                </view>
                <view class="right ml-20 te-wid">
                    <view class="top mt-20">
                        <view class="ft-32 fw-800 c-33"
                            style="overflow: hidden;line-height: 40rpx;vertical-align: middle;">
                            <text class="tip ft ft-20" v-for="(tag, index) in item.recommends_show" :key="index"
                                :style="{ marginRight: index == item.recommends_show.length - 1 ? '10rpx' : '4rpx' }">
                                {{ tag }}
                            </text>
                            <text>

                                {{ item.name }}
                            </text>

                        </view>

                    </view>
                    <view class="midel mt-4">
                        <text class="ft c-99" v-for="(tag, index) in item.tags" :key="index">
                            <text v-if="index === item.tags.length - 1">{{ tag.name }}</text>
                            <text class="mr-4" v-else>{{ tag.name }}<text class="ml-4">|</text></text>
                        </text>
                    </view>
                    <view class="domn_box flex-bwt mt-20">
                        <view class="domn flex">
                            <view class="price pd-10 c-red">
                                <view class="ft-22 fw-800">白菜价</view>
                                <text class="ft-20 fw-800">
                                    {{ item.currency_symbol }}
                                    <text class="ft-36 ft-eng c-red">
                                        {{ item.bc_price_show }}</text>
                                    {{ item.bc_price_unit }}</text>
                            </view>
                            <!-- <image class="wh-37" style="margin: 0 20rpx;"
                                src="https://cdn.oss.bon-top.cn/static_bc/images/price1.png"></image> -->
                            <text
                                style="display: inline-block;height: 40rpx;width: 2rpx;background: #f1f1f1;margin: 0 10rpx;"></text>
                            <view class="price2  pd-10">
                                <view class="ft c-99">同行价</view>
                                <text v-if="item.peer_price_show"
                                    style="font-weight: 800; font-size: 20rpx; color: #999999">
                                    {{ item.currency_symbol }}
                                    <text class="ft-28 c-99 ft-eng">
                                        {{ item.peer_price_show }}</text>
                                    {{ item.peer_price_unit }}</text>
                                <text v-else style="font-weight: 800; font-size: 20rpx; color: #999999">
                                    {{ "暂无价格" }}
                                </text>
                            </view>
                        </view>

                    </view>
                </view>
            </view>

            <view class="foot mt-20 flex-bwt">
                <view class="arrow">
                    <text class="ft c-33" v-if="item.brand_info">{{ "项目方:" + item.brand_info.name }}</text>
                    <text class="ft" v-else>{{ "项目方:暂无数据" }}</text>
                </view>
                <view class="down flex mr-12">
                    <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon12.png"></image>
                    <text class="ft  c-66" style="margin-left: 8rpx" v-if="item.country_info"> {{ item.country_info.name
                    }}</text>
                    <text class="ft" style="margin-left: 8rpx" v-else> {{ '暂无数据' }}</text>
                </view>
            </view>
            <view class="domn_box_btn" v-if="app?.globalData?.isTeacherAdd"
                :class="projectIds.includes(item.id) ? 'domn_box_btnNoadd' : ''" @click.stop="addProject(item)">{{
                    projectIds.includes(item.id) ? '取消' : '选为推荐' }}
            </view>
        </view>
        <u-loadmore v-if="isLoad" :status="loadmoreList.status" :loading-text="loadmoreList.loadingText"
            :loadmore-text="loadmoreList.loadmoreText" :nomore-text="loadmoreList.nomoreText" />

        <!-- 查看已选项目 -->
        <up-popup :show="show" mode="bottom" :round="20" :closeable="true" @close="close">
            <view class="header_box pd-20">
                <text class="ft-28 c-33 fw-800">查看已选项目</text><br>
                <text class="ft-22 c-66">已选{{ selectProList.length }} 个</text>
            </view>
            <scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
                <view class="popup">
                    <view class="popup_contentList">

                        <view class="project pd-20" @click="goProjectDetail(item.id)" v-for="item in selectProList"
                            :key="item.id">
                            <view class="flex">

                                <view class="left">
                                    <image style="border-radius: 40rpx;" class="img wh-100" :src="item.cover"
                                        mode="aspectFill"></image>
                                </view>
                                <view class="right ml-20">
                                    <view class="top mt-20">
                                        <view class="flex fs0" style="overflow: hidden;">
                                            <view class="flex" v-if="item.recommends_show">
                                                <view class="tip ft ft-20 flex-center fs0"
                                                    v-for="(tag, index) in item.recommends_show" :key="index">
                                                    {{ tag }}
                                                </view>
                                            </view>
                                            <view style="width: 240rpx;" class="title  ft-lue ft ft-32 fw-800">{{
                                                item.name
                                                }}</view>
                                        </view>

                                    </view>
                                    <view class="midel mt-4">
                                        <text class="ft c-99" v-for="(tag, index) in item.tags" :key="index">
                                            <text v-if="index === item.tags.length - 1">{{ tag.name }}</text>
                                            <text class="mr-4" v-else>{{ tag.name }}<text class="ml-4">|</text></text>
                                        </text>
                                    </view>
                                    <view class="domn_box flex-bwt mt-20">
                                        <view class="domn flex">
                                            <view class="price">
                                                <view class="ft">白菜价</view>
                                                <text class="ft-20 c-33 fw-800 mt-8">
                                                    {{ item.currency_symbol }}
                                                    <text class="ft-28 c-33 ft-eng">
                                                        {{ item.bc_price_show }}</text>
                                                    {{ item.bc_price_unit }}</text>
                                            </view>
                                            <image class="wh-37" v-if="item.peer_price_show > 0"
                                                style="margin: 0 20rpx;"
                                                src="https://cdn.oss.bon-top.cn/static_bc/images/price1.png"></image>
                                            <view class="price2  pd-10" v-if="item.peer_price_show > 0">
                                                <view class="ft c-99">同行价</view>
                                                <text v-if="item.peer_price_show?.length > 0"
                                                    style="font-weight: 800; font-size: 20rpx; color: #999999">
                                                    {{ item.currency_symbol }}
                                                    <text class="ft-28 c-99 ft-eng">
                                                        {{ item.peer_price_show }}</text>
                                                    {{ item.bc_price_unit }}</text>
                                                <text v-else style="font-weight: 800; font-size: 20rpx; color: #999999">
                                                    {{ "暂无价格" }}
                                                </text>
                                            </view>
                                        </view>


                                    </view>
                                </view>
                            </view>

                            <view class="foot auto mt-20 flex-bwt">
                                <view class="arrow ml-12">
                                    <text class="ft c-99" v-if="item.brand_info">{{ "项目方:" + item.brand_info.name
                                    }}</text>
                                    <text class="ft" v-else>{{ "项目方:暂无数据" }}</text>
                                </view>
                                <view class="down flex mr-12">
                                    <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon12.png">
                                    </image>
                                    <text class="ft" style="margin-left: 8rpx" v-if="item.country_info"> {{
                                        item.country_info.name
                                        }}</text>
                                    <text class="ft" style="margin-left: 8rpx" v-else> {{ '暂无数据' }}</text>
                                </view>
                            </view>
                            <view class="domn_box_btn" v-if="app?.globalData?.isTeacherAdd"
                                :class="projectIds.includes(item.id) ? 'domn_box_btnNoadd' : ''"
                                @click.stop="addProject(item)">{{ projectIds.includes(item.id) ? '取消' :
                                    '选为推荐'
                                }}
                            </view>
                        </view>
                        <view :style="{ height: (98 + 68) + 'rpx' }"></view>

                    </view>

                    <view class="btn_box">

                        <view class="pupop_btn" @click="close">返回</view>
                    </view>
                </view>
            </scroll-view>
        </up-popup>
        <view :style="{ height: (98 + 68) + 'rpx' }"></view>
        <view class="btn_box" v-if="projectIshow">
            <view class="box flex-bwt" style="height: 98rpx;">
                <view class="btn_left ft-24 c-33">
                    已选({{ projectIds.length }})
                </view>
                <view class="flex">
                    <view class="btn mr-20" v-if="projectIds.length" @click="showPupop()">查看</view>

                    <view class="btn add" v-if="projectIds.length" @click="addProjectItem()">添加 </view>
                    <view class="btn add" style="color: #fff;" v-else @click="addProjectItem()">返回</view>
                </view>
            </view>

        </view>
    </view>
</template>
<script setup lang="js">
import { onReachBottom, onShow } from '@dcloudio/uni-app';
import { onMounted, reactive, ref, watch } from 'vue';
import {
    utils
} from '@/utils/utils.js';
import {
    api
} from '@/utils/api.js';
let prop = defineProps(['dataList', 'pageInfo', 'dataObj'])
let { dataList, dataObj, pageInfo } = prop
let emit = defineEmits('getProjectList')
let loadmoreList = reactive({
    status: "loadmore",
    loadingText: "加载中~",
    loadmoreText: "加载更多",
    nomoreText: "没有更多了",
})
let isLoad = ref(true)
let app = getApp()
const show = ref(false)

const projectIds = ref([])
const projectIshow = ref(false)
projectIshow.value = app.globalData.isTeacherAdd
projectIds.value = app.globalData.projectIds
console.log('app.globalData.projectIds', app.globalData)
const datas = ref([])
watch(() => prop.dataList, (newValue, oldValue) => {
    datas.value = newValue
}, {
    immediate: true,
    deep: true
})
const addProjectItem = () => {
    if (app.globalData.multiple) {
        // 添加
        utils.request(
            api.addSaleRecommend, { ids: app.globalData.projectIds },
            "post"
        )
            .then((res) => {
                uni.showToast({ title: '推荐成功', icon: 'none' })
                uni.navigateTo({ url: '/subpackage/teacher/recommendDemo' })
                projectIds.value = []
                app.globalData.projectIds = []
                app.globalData.projectItem = []
                projectIshow.value = false
                app.globalData.isTeacherAdd = false
                selectProList.value = []

            })
    } else {

        uni.navigateBack(-1)
    }

}
const addProject = (item) => {
    console.log('app.globalData.multiple', app.globalData.multiple)

    let arr = app.globalData.projectIds
    if (arr.indexOf(item.id) !== -1) { //数据已经存在 删除
        arr = arr.filter((f, i) => f !== item.id)
        app.globalData.projectItem = app.globalData.projectItem.filter((f, i) => f.id !== item.id)

    } else {
        // 多选
        if (app.globalData.multiple) {
            arr.push(item.id)

        } else {//单选
            if (app.globalData.projectIds.length > 0) return uni.showToast({ title: '最多选择一个项目', icon: 'none' })
            arr = [item.id]
        }

        app.globalData.projectItem.push(item)
    }
    app.globalData.projectIds = [...new Set(arr)]
    projectIds.value = app.globalData.projectIds
    selectProList.value = app.globalData.projectItem

}
const selectProList = ref([])
const showPupop = () => {
    selectProList.value = app.globalData.projectItem
    show.value = true
}
const close = () => {
    show.value = false;
};
onShow(() => {
    if (projectIshow.value) {
        projectIds.value = app.globalData.projectIds

    }
})
onMounted(() => {
    // 如果没有pageInfo 代表不需要做触底加载
    if (!pageInfo) return isLoad.value = false
    if (pageInfo.page >= dataObj.pageInfo?.totalPage) {
        loadmoreList.status = 'nomore'

    } else { loadmoreList.status = 'loadmore' }
    // 选择推荐项目逻辑
    if (projectIshow.value) {
        projectIds.value = app.globalData.projectIds

    }

})
onReachBottom(() => {
    if (!pageInfo) return isLoad.value = false
    if (pageInfo.page >= dataObj.pageInfo?.totalPage) {
        loadmoreList.status = 'nomore'
    } else {
        loadmoreList.status = 'loading'
        pageInfo.page++
        setTimeout(() => {
            emit('getProjectList')
            loadmoreList.status = 'loadmore'

        }, 500)
    }
})
const goProjectDetail = (id) => {
    uni.navigateTo({
        url: `/subpackage/immigration/immigration?id=${id}`,
    });
};
</script>
<style lang="scss" scoped>
.project_box {
    // padding: 0 20rpx;
    box-sizing: border-box;
}

.project {
    margin: auto;
    // margin-top: 10rpx;
    margin-bottom: 20rpx;
    // width: 650rpx;
    min-height: 408rpx;
    background: #f1f1f1;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 2rpx solid #f1f1f1;
    position: relative;

    .isSaleOut {
        position: absolute;
        width: 158rpx;
        height: 148rpx;
        left: 0rpx;

        top: 0rpx;
        z-index: 0;
        opacity: .3;
    }

    .left {
        width: 222rpx;
        height: 274rpx;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        flex-shrink: 0;
    }

    .right {
        flex: 1;
        // height: 274rpx;

        .top {
            position: relative;
            z-index: 1;

            .tip {
                display: inline-block;
                height: 36rpx;
                line-height: 36rpx;
                background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
                border-radius: 8rpx 8rpx 8rpx 8rpx;
                margin-right: 4rpx;
                padding: 0rpx 4rpx;
                position: relative;
                top: -4rpx;
                // box-sizing: border-box;
            }

            .title {
                flex: 1;
            }
        }

        .domn {
            background: linear-gradient(90deg,
                    #fff 0%,
                    rgba(255, 245, 243, 0) 100%);
            border-radius: 20rpx;
            overflow: hidden;

            .price {
                // width: 148rpx;
                // height: 92rpx;
                // background: linear-gradient(90deg,
                //         #fff5f3 0%,
                //         rgba(255, 245, 243, 0) 100%);
            }

            .price2 {
                // width: 148rpx;
                // height: 92rpx;
                // background: #fff;
                // border-radius: 20rpx 20rpx 20rpx 20rpx;
            }
        }




    }

    .foot {
        width: 100%;
        height: 74rpx;
        // background: linear-gradient(92deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
        background: linear-gradient(90deg,
                #fff 0%,
                rgba(255, 245, 243, 0) 100%);
        border-radius: 40rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
    }
}

.domn_box_btn {
    font-size: 24rpx;
    color: #DBF046;
    width: 136rpx;
    height: 58rpx;
    line-height: 58rpx;
    text-align: center;
    background: #333333;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-left: auto;
    margin-top: 10rpx;
}

.domn_box_btn.domn_box_btnNoadd {
    color: #fff;

}

.btn_box {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #F8F8F8;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
    z-index: 999;

    .btn_left {
        width: 132rpx;
        height: 54rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        line-height: 54rpx;
        text-align: center;
    }

    .btn {
        width: 192rpx;
        height: 78rpx;
        background: #F1F1F1;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        text-align: center;
        line-height: 78rpx;
        font-size: 28rpx;

    }

    .box {
        padding: 0 30rpx;
        box-sizing: border-box;
        height: 98rpx;


        .add {
            color: #DBF046;
            background-color: #333333;
        }

    }
}

:deep(.u-popup__content) {
    border-radius: 0 !important;
}

.popup {
    min-height: 320rpx;
    max-height: 1200rpx;
    // border: 2rpx solid red;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    // padding: 40rpx;
    .header_box {
        background: #fff;
    }

    .popup_contentList {
        background-color: #F8F8F8;
        padding: 20rpx;
        box-sizing: border-box;
        flex: 1;

    }

    .btn_box {
        padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
        z-index: 999;

        .pupop_btn {
            // width: 100%;
            height: 72rpx;
            margin: 0 30rpx;
            box-sizing: border-box;
            text-align: center;
            background-color: #333333;
            color: #fff;
            line-height: 72rpx;
            border-radius: 20rpx;
            font-size: 28rpx;
            margin-bottom: calc(20rpx + env(safe-area-inset-bottom))
        }
    }


}
</style>